<!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>身份验证</title>
    <link rel="stylesheet" type="text/css" href="../../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/swiper.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../../css/style.css"/>
      <style>
      html,body{
          /*background: #fff;*/
      }
      .inner_header{
          font-size: 1.6rem;
          color: #000000;
          font-weight: 600;
          height: 6.9rem;
          margin: 0;
          padding: 2.4rem 0 0 0;
          box-sizing: border-box;
          background: none!important;
          box-shadow: 0rem 0rem 0.8rem 0rem rgba(0, 0, 0, 0.08);
          background: #fff!important;
      }
      .inner_header .right{
        font-size: 1.4rem;
        color: #6f6f6f;
      }
      .content{
        width: 100%;
        float: left;
        margin: 6.9rem 0 0 0;
      }
      .content_list{
          background: #fff;
          width: 100%;
          float: left;
          box-sizing: border-box;
          padding: 0 1.3rem 0 1.3rem;
          margin-top: 1.05rem;
      }
      .content .ash{
        background-color: #f2f2f2;
        width: 100%;
        font-size: 1.3rem;
        color: #999;
        margin-top: 1.25rem;
        letter-spacing: 0.03rem;
        height:1.3rem;
        line-height: 1.3rem;
      }
      .content_li{
          float: left;
          width: 100%;
          height: 4.45rem;
          box-sizing: border-box;
          border-bottom: 0.05rem solid #e6e6e6;
          color: #333333;
          font-size: 1.5rem;
          line-height: 4.45rem;
      }
      .content_li img{
          float: right;
          margin: 1.5rem 1.3rem 0 0;
          width: 0.7rem;
          height: 1.4rem;
      }
      .content_list .content_li:last-child{
          border-bottom: none;
      }
      /* 弹出框 */
      .content .todal{
        width: 72%;
        height: 21.5rem;
        margin: 0 auto;
        margin-top: 16.15rem;
        border-radius: 1rem;
        background-color: #fff;
      }
      .content .todal .head{
        height: 4.8rem;
        line-height: 4.8rem;
        text-align: center;
        color: #000;
        font-size: 1.8rem;
        border-bottom: 0.05rem solid #e6e6e6;
      }
      .content .todal .second{
        height: 3.85rem;
        line-height: 3.85rem;
        text-align: center;
        color: #666;
        font-size: 1.3rem;
        margin-top: 0.65rem;
      }
      .content .todal .code{
        width: 23.75rem;
        height: 5.7rem;
        display: flex;
        margin: 0 auto;
      }
      .content .todal .code .left{
        display: block;
        margin-right: 0.35rem;
        width: 11.7rem;
        height: 5.7rem;
        line-height: 5.7rem;
        text-align: center;
        color: #666;
        font-size: 1.3rem;
        border: 0.05rem solid #e6e6e6;
      }
      .content .todal .code .right{
        width: 11.7rem;
        height: 5.7rem;
        line-height: 5.7rem;
        text-align: center;
        color: #999;
        font-size: 1.3rem;
        border: 0.05rem solid #e6e6e6;
      }
        .content .todal .footer{
          height: 4.4rem;
          line-height: 4.4rem;
          text-align: center;
          display: flex;
          color: #666;
          font-size: 1.6rem;
          border-top: 0.05rem solid #e6e6e6;
          box-sizing: border-box;
          margin-top: 2rem;
        }
        .content .todal .footer div{
          flex: 1;
        }
        .content .todal .footer .left{
          border-right: 0.05rem solid #e6e6e6  ;
        }

      </style>
  </head>
  <body>
      <div id="app">
        <header class="aui-bar aui-bar-nav aui-bar-light inner_header">
          <a class="aui-pull-left aui-btn" onclick="goBack()">
              <img src="../../../image/back.png">
          </a>
          <div class="aui-title">身份验证</div>
          <a class="aui-pull-right share_nav_right right">
               取消
          </a>
        </header>
        <div class="content">
          <div class="content_list ash">
    您正在重置支付密码，请用以下验证方式完成身份验证
          </div>
          <div class="content_list">
            <div class="content_li">
                使用(尾号6709)的手机进行验证
                <img src="../../../image/capital/icon4.png" alt="#" @click="clickphone">
            </div>
            <div class="content_li">
                验证身份信息
                <img src="../../../image/capital/icon4.png" alt="">
            </div>
          </div>
          <div class="todal" v-if="create">
              <div class="head">验证手机号</div>
              <div class="second">输入手机尾号6709接收到的短信验证码</div>
              <div class="code">
                  <input type="tel" placeholder="短信验证码" @input="clickInput" ref="refcode" maxlength="6" class="left">
                <div class="right">{{number}}秒后重发</div>
              </div>
              <div class="footer">
                <div class="left" @click="cancel">取消</div>
                <div class="right" @click="confirm('paysetting','./paysetting.html')">确认</div>
              </div>
          </div>
        </div>

      </div>
  </body>
  <script type="text/javascript" src="../../../script/api.js"></script>
  <script type="text/javascript" src="../../../script/zepto.js"></script>
  <script type="text/javascript" src="../../../script/vue.min.js"></script>
  <script type="text/javascript" src="../../../script/swiper.min.js"></script>
  <script type="text/javascript" src="../../../script/utils.js"></script>
  <script type="text/javascript" src="../../../script/common.js"></script>
  <script type="text/javascript" src="../../../script/aui-tab.js"></script>
  <script type="text/javascript" src="../../../script/aui-scroll.js"></script>
  <script type="text/javascript" src="../../../script/aui-pull-refresh.js"></script>
  <script type="text/javascript">
      apiready = function(){

      };
      new Vue({
        el:"#app",
        data:{
          create:false,
          number:106
        },
        methods:{
          clickphone:function(){
            this.create=true;
            var clock = window.setInterval(() => {
                if(this.create==false){
                  window.clearInterval(clock);
                  this.number='106'
                } else {
                  this.number--
                  console.log(this.number)
                  if (this.number < 0) {     //当倒计时小于0时清除定时器
                    window.clearInterval(clock)
                    this.number = '106'
                  }
                }
            },1000)
          },
          // 点击取消，弹出框消失
          cancel:function(){
            this.create=false
          },
          // 点击确定，弹出框消失
          confirm:function(name,url){
              this.create=false
              api.openWin({
                  name: name,
                  url: url,
                  pageParam:{
                    data:""
                  }
              });

          },
          clickInput:function(){

          }
        },
      })
      function goBack() {
        api.closeWin({

        });
      }
  </script>
  </html>
